<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<style type="text/css">
body, html, #map{
	margin:0px;
	width: 100%;
	height: 100%;
}
</style>

<!--导入Google Maps API库文件。注意将本代码中的API Key替换为前文申请到的API Key-->
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAA1j86tnUDFv8OAtC8dZVtKRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxSzmwrQ90SNUILzGRpsBiaa860gfQ" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[

    var map;  //全局GMap

    //网页加载时用于初始化Google地图
    function load()
    {
      if (GBrowserIsCompatible())       {
        //创建GMap2对象
        map = new GMap2(document.getElementById("map"));
        
        //缩放级别设得比较小，如不合适可自行设定合适的级别
        map.setCenter(new GLatLng(37.4419, -122.1419), 1);
        
        //动态创建DOM节点
        var ss = document.createElement("script");
        
        //设定脚本的src
        ss.src = "http://maps.live.com/WiFiIPService/locate.ashx";
        
        //设定脚本的type
        ss.type="text/javascript";
        
        //附加脚本到网页的DOM
        //除了往下面document.documentElement元素appendChild外
        //也可以在document.body或其他DOM元素中添加新的节点
        document.documentElement.appendChild(ss);
      }
    }
    
    //SetAutoLocateViewport()接口，移动到当前访客的位置
    //第一个参数latitude——当前IP所在的纬度
    //第二个参数longitude——当前IP所在的经度
    //第三个参数zoomlevel——当前适合于微软Virtual Earth显示的缩放级别（对Google Maps API程序基本无用）
    //第四个参数unknown——该接口无相应信息，可能为是否开启Virtual Earth地图的Virtual 3D功能（对Google Maps API程序无用）
    //第五个参数message——应该显示消息（对Google Maps API程序无用）
    function SetAutoLocateViewport(latitude, longitude, zoomlevel, unknown, message)
    {
      //访客所处位置
      var point = new GLatLng(latitude, longitude);
      
      //创建一个自定义的GIcon
      var myIcon= new GIcon();
      myIcon.image = "http://labs.google.com/ridefinder/images/mm_20_green.png";
      myIcon.shadow = "http://labs.google.com/ridefinder/images/mm_20_shadow.png";
      myIcon.iconSize = new GSize(12, 20);
      myIcon.shadowSize = new GSize(22, 20);
      myIcon.iconAnchor = new GPoint(6, 20);
      myIcon.infoWindowAnchor = new GPoint(5, 1);
      
      //标记访客位置
      var marker = new GMarker(point,//创建自定义的GMarker
                                {icon: myIcon,
                                 title: "绿色标记为您当前的位置"});
      
      map.addOverlay(marker);
      
      //移动到当前访客的位置
      map.panTo(point);
    }
    
    //ShowMessage()接口
    function ShowMessage()
    {
      alert("暂时无法提供你的地理位置，请稍候再试！");
    }
    
    //AutoLocateUndetectable()接口
    function AutoLocateUndetectable()
    {
      alert("你的地理位置暂时无法被探测，请稍候再试！");
    }
    
    //]]>
    </script>
  </head>
  <!--加载时调用load()函数加载地图，注意加上onunload="GUnload()"防止内存泄露-->
  <body onload="load()" onunload="GUnload()">
    <!--
    以下id为map的DIV元素即为Google地图的容器
    因为已在CSS中定义该层宽、高均为100%，故此处不必重复定义
    -->
    <div id="map"></div>
  </body>
</html>
